{% extends "layout/project.html" %}
{% load static %}
{% load project %}

{% block css1 %}
<link rel="stylesheet" href="{% static 'plugins\editor.md-master\css\editormd.preview.css' %}">
<style>
    .wiki-container {
        min-height: 100vh;
    }

    /* 侧边栏样式 */
    .sidebar {

        height: 100vh;
        border-right: 1px solid #dee2e6;
        padding: 20px;
    }

    /* 内容区域样式 */
    .content-area {
        background: white;
        padding: 20px;
        height: 100vh;
    }

    /* 容器高度控制 */
    .preview-container {
        height: calc(100vh - 200px);
        /* 根据实际布局调整 */
        display: flex;
        flex-direction: column;
    }


    /* 滚动条美化 */
    .scrollable-content::-webkit-scrollbar {
        width: 8px;
    }

    .scrollable-content::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .scrollable-content::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
    }

    .scrollable-content::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

    /* 移动端优化 */
    @media (max-width: 768px) {
        .preview-container {
            height: calc(100vh - 160px);
            -webkit-overflow-scrolling: touch;
            /* 惯性滚动 */
        }
    }
</style>
{% endblock %}

{% block content1 %}
<div class="container-fluid wiki-container">
    <div class="row">
        <div class="container-fluid">
            <div class="row flex-nowrap">
                <!-- 左侧大纲 (始终显示，响应式宽度) -->
                <div class="row flex-nowrap ">
                <!-- 左侧大纲 (始终显示，响应式宽度) -->
                <div class="col-12 col-md-4 col-xxl-3"
                    style="border: 1px solid #DEE2E6; max-height: calc(100vh - 100px); overflow-y: auto;">
                    <div class="d-flex justify-content-between align-items-center p-3">
                        <h5 class="mb-0"><i class="bi-journal-bookmark nav-icon"></i>文档大纲</h5>
                    </div>

                    <ul id="catalog" class="p-3">
                        <!-- 大纲内容 -->
                    </ul>

                </div>

                <!-- 右侧主内容 (自适应宽度) -->
                <div class="col-12 col-md-8 col-xxl-9" style="min-height: 100vh;">
                    <div class="p-3" style="border: 1px solid #DEE2E6; height: calc(100vh - 100px);">
                        <div class="d-flex flex-column h-100">
                            {% if wiki_object %}
                            <!-- 操作按钮 -->
                            <div class="d-flex gap-2 mb-3">
                                <a href="{% url 'wiki_add' project_id=request.tracer.project.id %}"
                                    class="btn btn-outline-success btn-sm">
                                    <i class="bi-file-plus"></i> 新建
                                </a>
                                <a href="{% url 'wiki_edit' project_id=request.tracer.project.id wiki_id=wiki_object.id %}"
                                    class="btn btn-outline-secondary btn-sm">
                                    <i class="bi-pencil"></i> 编辑
                                </a>
                                <a href="{% url 'wiki_delete' project_id=request.tracer.project.id wiki_id=wiki_object.id %}"
                                    class="btn btn-outline-danger btn-sm"
                                    onclick="return confirm('确定要删除该文档吗？删除后数据将无法恢复！');">
                                    <i class="bi-trash"></i> 删除
                                </a>
                            </div>

                            <!-- 预览区域 -->
                            <div id="previewMarkdown" class="flex-grow-1 overflow-auto"
                                style="border: 1px solid #DEE2E6;">
                                <textarea style="display:none;">{{ wiki_object.content }}</textarea>
                                <div class="markdown-body">
                                    <!-- Markdown渲染内容 -->
                                </div>
                            </div>

                            {% else %}
                            <!-- 空状态 -->
                            <div class="text-center my-auto">
                                <h3 class="mb-4">《{{request.tracer.project.name}}》wiki文档库</h3>
                                <div class="d-flex justify-content-center gap-2">
                                    <a href="{% url 'wiki_add' project_id=request.tracer.project.id %}"
                                        class="btn btn-outline-success btn-sm">
                                        <i class="bi-file-plus"></i> 新建文档
                                    </a>
                                </div>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block js1 %}
<script src="{% static 'plugins\editor.md-master\editormd.min.js' %}"></script>
<script src="{% static 'plugins\editor.md-master\lib\underscore.min.js' %}"></script>
<script src="{% static 'plugins\editor.md-master\lib\sequence-diagram.min.js' %}"></script>
<script src="{% static 'plugins\editor.md-master\lib\raphael.min.js' %}"></script>
<script src="{% static 'plugins\editor.md-master\lib\prettify.min.js' %}"></script>
<script src="{% static 'plugins\editor.md-master\lib\marked.min.js' %}"></script>
<script src="{% static 'plugins\editor.md-master\lib\jquery.flowchart.min.js' %}"></script>
<script src="{% static 'plugins\editor.md-master\lib\flowchart.min.js' %}"></script>
<script>
    let WIKI_DETAIL_URL = "{% url 'wiki' project_id=request.tracer.project.id %}"
    $(function () {
        initCatalog();
        initPreviewMarkdown();
    });
    // 初始化wiki目录
    function initCatalog() {
        $.ajax({
            url: "{% url 'wiki_catalog' project_id=request.tracer.project.id %}",
            type: "GET",
            dataType: "JSON",
            success: function (res) {
                if (res.status) {
                    $('#catalog').empty(); // 清空旧内容
                    $.each(res.data, function (index, item) {
                        let href = WIKI_DETAIL_URL + "?wiki_id=" + item.id;// 生成链接地址
                        const $li = $("<li>")
                            .addClass("nav-item")          // 添加 Bootstrap 导航项类
                            .attr('id', 'id_' + item.id)    // 设置唯一 ID（如 id_123）
                            .append(
                                $("<a>")
                                    .addClass("nav-link")   // Bootstrap 导航链接样式
                                    .attr('href', href || '#')  // 链接地址（默认#）
                                    .text(item.title)       // 显示标题
                            )
                            .append($("<ul>"));            // 附加一个空的 <ul> 容器

                        if (!item.parent_id) {
                            $('#catalog').append($li);     // 无 parent_id 则添加到根目录
                        } else {
                            $("#id_" + item.parent_id).children("ul").append($li); // 有 parent_id 则作为子项
                        }
                    });
                }
                else {
                    alert("初始化目录失败");
                }
            }
        })
    }

    function initPreviewMarkdown() {
        editormd.markdownToHTML("previewMarkdown", {
            htmlDecode: "style, script, iframe"
        })
    }

</script>

{% endblock %}